<template>
<div>
    <div class="vs-table-box">
        <h3>顾客信息</h3>
        <el-form label-position="right" :rules="rules"  label-width="100px" :model="ruleForm">
            <el-form-item label="顾客姓名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="resource">
                <el-radio-group size="small" v-model="ruleForm.resource">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="预约方式" prop="resource">
                <el-radio-group size="small" v-model="ruleForm.resource">
                    <el-radio label="大众点评"></el-radio>
                    <el-radio label="小程序"></el-radio>
                    <el-radio label="电话"></el-radio>
                    <el-radio label="我的管家"></el-radio>
                    <el-radio label="散客"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="预计到店时间" prop="resource">
                <el-date-picker
                    v-model="ruleForm.resource"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="会员卡号" prop="code">
                <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
            <el-form-item label="剩余金额" prop="code">
                <el-input v-model="ruleForm.code"></el-input>
                元
                <span class="tab-red-text">立即充值</span>
            </el-form-item>
        </el-form>
        <h3>项目信息</h3>
        <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
            <el-table-column prop="username" label="预约项目" width="130"> </el-table-column>
            <el-table-column prop="username" label="预约房间" width="130"> </el-table-column>
            <el-table-column prop="code" label="预约床位" min-width="70"> </el-table-column>
            <el-table-column prop="create_time" label="预约技师" min-width="150">
                <template slot="header" slot-scope="scope">
                    预约技师 <span @click="dialogVisible=true" class="tab-red-text">更换</span>
                </template>
            </el-table-column>
            <el-table-column prop="create_time" label="金额(元)" min-width="150"> </el-table-column>
            <el-table-column prop="title" label="备注" min-width="240"> </el-table-column>
        </el-table>
        <div style="margin-top:40px">
            <el-button @click="utils.backPage()">取消预约</el-button>
            <el-button type="primary" >确认预约</el-button>
        </div>
    </div>

    <el-dialog
        title="更换技师"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="原技师：">
                <el-select style="width:200px" clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更后技师：">
                <el-select style="width:200px" clearable  v-model="ruleForm.username" placeholder="请选择">
                    <el-option label="推拿" value="1"> </el-option>
                    <el-option label="足疗" value="2"> </el-option>
                    <el-option label="SPA" value="3"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="变更原因">
                <el-input type="textarea" v-model="ruleForm.username"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose()">取 消</el-button>
            <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="更换记录"
        :visible.sync="dialogVisible2"
        width="600px">
        <el-descriptions :column="1">
            <el-descriptions-item label="原技师">kooriookami</el-descriptions-item>
            <el-descriptions-item label="变更后技师">18100000000</el-descriptions-item>
            <el-descriptions-item label="变更原因">苏州市</el-descriptions-item>
            <el-descriptions-item label="变更时间：">2021-12-01  12:20:01</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</div>
</template>

<script>
export default {
    data(){
        return {
            dialogVisible:false,
            dialogVisible2:false,
            loading:false,
            tableData:[
                {}
            ],
            isBtn:false,
            ruleForm:{
                username:'',
                title:'',
                type:'',
                code:'',
            },
            rules: {
                username: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ],
                title: [ { required: true, message: '请输入企业名称', trigger: 'blur' }, ],
                type: [ { required: true, message: '请选择渠道', trigger: 'change' }, ],
                code:{ required: true, message: '请输入服务码', trigger: 'blur'}
            },
        }
    },
    methods:{
        handleClose(dom){
            dom&&dom();
            this.dialogVisible = false;
        },
        setAd(){

        }
    }
}

</script>